<style>
	#park-org-group-frame {
		position: relative;
		width:100%;
		height: 100%;
		background: #f3f3f3;
	}
	#park-org-group-frame ul {
		margin: 5px 0;
		padding-left:20px;
	}
	#park-org-group-frame .slide-open-menu.top ul > li li {
		padding: 3px 0px;
	}
	#park-org-group-frame .slide-open-menu.top ul > li li:before {
		border-left:2px solid #ccc;
	}
	#park-org-group-frame .slide-open-menu {
		position: absolute;
		left:150px;
		top:0;
		bottom:0;
		background: #fff;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		overflow-y: auto;
		overflow-x: hidden;
		right: 0;
	}
	#park-org-group-frame .slide-open-menu.top {
		display:block;
		left:0;
		width: 950px;
		border-width: 5px 1px;
		border-style: solid;
		border-color: #50b5e9;
		margin: 50px auto;
	}
	#park-org-group-frame .slide-open-item.template {
		display: none;
	}
	#park-org-group-frame .slide-open-item:hover {
		background: #e8e8e8;
	}
	#park-org-group-frame .slide-open-menu.panel .slide-open-item {
		width:390px;
		overflow-y: auto;
	}
	#park-org-group-frame .slide-open-menu.panel .slide-open-menu {
		left:400px;
		right:inherit;
	}
	#park-org-group-frame .slide-open-menu.panel ul {
		margin-bottom:5px;
	}
	#park-org-group-frame .slide-open-menu.panel .slide-open-content {
		display: none;
	}
	#park-org-group-frame .slide-open-menu.panel > ul > li {
		border-bottom:2px solid #e6e6e6;
		margin-bottom:20px;
		padding:15px 5px;
	}

	#park-org-group-frame .slide-open-item {
		width:140px;
		padding:8px 5px;
		font-size:14px;
		border-bottom:1px solid #e0e0e0;
	}
	#park-org-group-frame .slide-open-item {
		user-select: none;
	}
	#park-org-group-frame .slide-open-menu .showAdvance {
		text-decoration: none;
		color:dodgerblue;
		font-size:14px;
	}
	#park-org-group-frame .bind-workstation {
		text-decoration: none;
		color:dodgerblue;
	}
	#park-org-group-frame .slide-open-item.create {
		color: #37a1d8;
		text-align: center;
	}
	#park-org-group-frame .slide-open-item.create:before {
		content: '⚙ ';
	}
</style>
<section id="park-org-group-frame">
	<div class="slide-open-menu top">
		<div class="slide-open-item template">
			<p class="group-title">新建权限分组</p>
			<div class="slide-open-menu panel">
				<div class="slide-open-item">
					<input type="text" class="k-textbox group-title-input" placeholder="新建权限分组" onkeyup="parkOrgGroupManager.changeGroupTitleEvent(this, event)" validationMessage="不能包含特殊字符"
					       pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$" />
					<a href="javascript:void(0)" style="float: right;" class="bind-workstation" onclick="parkOrgGroupManager.deleteGroup(this, event)">删除该分组</a>
					<ul>
						<li>
							通行权限管控&nbsp;
							<label><input type="radio" name="accpet" value="1" />允许</label>
							<label><input type="radio" name="accpet" value="0" />不允许</label>
							<a href="javascript:void(0);" class="showAdvance" onclick="parkOrgGroupManager.showAdvance(this)" data-value="0">显示高级</a>
							<div class="slide-open-content">
								<ul>
									<li>
										<label><input type="checkbox" />允许进出</label>
										<ul class="ckIE"></ul>
									</li>
									<li>
										<label><input type="checkbox" />允许重复进出</label>
										<ul class="ckRepeatIE"></ul>
									</li>
									<li>
										<label><input type="checkbox" />限制满位进入</label>
										<ul class="fullStopIn"></ul>
									</li>
								</ul>
							</div>
						</li>
					</ul>
					<button type="button" style="float: right;margin:5px 0px;" class="k-button" onclick="parkOrgGroupManager.saveGroupSetting(this, event)">保存权限设置</button>
					<div class="slide-open-menu bind-chn">
						<div class="slide-open-item">
							绑定通道
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="slide-open-item create" onclick="parkOrgGroupManager.createGroup(this, event)">新建分区</div>
	</div>
</section>
<script src="views/parkLotCenter/facilitiesManage/js/park_org_group_manager.js"></script>
<script>
	var parkOrgGroupManager = new ParkOrgGroupManager($('#park-org-group-frame'));

	parkOrgGroupManager.$parent.find('.slide-open-item').not('.slide-open-item.create').bind('mouseenter', function () {
		$(this).siblings('.slide-open-item').not('.slide-open-item.create').find(' > .slide-open-menu').hide();
		$(this).find(' > .slide-open-menu').show();
	});
	parkOrgGroupManager.$parent.find('.slide-open-menu.top input[type="radio"]').bind('change', function () {
		if ($(this).val() == 0) {
			$(this).parents('li:eq(0)').find('li input[type="checkbox"]').prop('checked', '');
		} else {
			$(this). parents('li:eq(0)').find('li input[type="checkbox"]').prop('checked', 'checked');
		}
	});
	parkOrgGroupManager.$parent.find('.slide-open-menu.top input[type="checkbox"]').bind('change', function () {
		var result = $(this).is(':checked');
		if (result) {
			$(this).parents('li:eq(0)').find('li input[type="checkbox"]').prop('checked', 'checked').trigger('change');
		} else {
			$(this).parents('li:eq(0)').find('li input[type="checkbox"]').prop('checked', '').trigger('change');
		}
		$(this).parents('.slide-open-content').parents('li:eq(0)').find('input[type="radio"]').prop('checked', '');
		checkCheckboxStatus(this);
	});

	function checkCheckboxStatus (t) {
		var parent = $(t).parents('ul:eq(0)');
		var fparent = $(t).parents('ul:eq(0)').parents('li:eq(0)');
		if (fparent.find('> label > input[type="checkbox"]').length > 0) {
			if (parent.find('input[type="checkbox"]:checked').length == 0) {
				fparent.find('> label > input[type="checkbox"]').prop('checked', '');
				fparent.find('> label > input[type="checkbox"]')[0].indeterminate = false;
			} else {
				if (parent.find('input[type="checkbox"]').length == parent.find('input[type="checkbox"]:checked').length) {
					fparent.find('> label > input[type="checkbox"]').prop('checked', 'checked');
					fparent.find('> label > input[type="checkbox"]')[0].indeterminate = false;
					checkCheckboxStatus(fparent.find('> label > input[type="checkbox"]')[0]);
				} else {
					fparent.find('> label > input[type="checkbox"]').prop('checked', '');
					fparent.find('> label > input[type="checkbox"]')[0].indeterminate = true;
				}
			}
		} else if (fparent.find('> label > input[type="radio"]').length > 0) {
			if (parent.find('input[type="checkbox"]').length == parent.find('input[type="checkbox"]:checked').length) {
				fparent.find('> label > input[type="radio"][value="1"]').prop('checked', 'checked');
			} else {
				fparent.find('> label > input[type="radio"][value="0"]').prop('checked', 'checked');
			}
		} else {
			parent.find('input[type="checkbox"]').each(function(inx, itm) {
				itm.indeterminate = false;
			});
		}
	}
</script>